import { View, Swiper, SwiperItem } from '@tarojs/components';
import classnames from 'classnames';
import dayjs from 'dayjs';
import { useState } from 'react';
import { AtIcon } from 'taro-ui';
import { getDateList, getChineseWeek } from '@/utils/utils';
import './index.scss';

interface IProps {
  onChange: (time: number) => void;
  active: number;
}

const dates = getDateList();
console.log('dates: ', dates);

export default function ({ onChange = () => {}, active }: IProps) {
  const [currentSlider, setCurrentSlider] = useState<number>(0);
  const _onChange = (time: number) => {
    onChange?.(time);
  };

  const onDateSliderChange = (e) => {
    console.log(e.detail.current);
    setCurrentSlider(e.detail.current);
  };
  const changeSlider = (type: string) => {
    if (type === 'add' && currentSlider < 6) {
      setCurrentSlider(currentSlider + 1);
    }
    if (type === 'sub' && currentSlider > 0) {
      setCurrentSlider(currentSlider - 1);
    }
  };

  // useEffect(() => {
  //   console.log('activee', active);
  // }, [active]);

  return (
    <View className="appointment-week-list">
      <AtIcon
        className="left-icon"
        onClick={() => changeSlider('sub')}
        color={currentSlider === 0 ? '#ccc' : '#333'}
        value="chevron-left"
        size={14}
      />
      <Swiper className="week-list" current={currentSlider} onChange={onDateSliderChange}>
        {dates.map((date, key) => {
          return (
            <View key={key}>
              <SwiperItem>
                <View className="date-item">
                  {date.map((day) => {
                    return (
                      <View
                        key={day}
                        className={classnames('time-item', day === active ? 'active' : '')}
                        onClick={() => _onChange(day)}
                      >
                        <View className="time-str">{getChineseWeek(day)}</View>
                        <View className="time-str">{dayjs(day).format('MM月DD日')}</View>
                      </View>
                    );
                  })}
                </View>
              </SwiperItem>
            </View>
          );
        })}
      </Swiper>
      <AtIcon
        className="right-icon"
        onClick={() => changeSlider('add')}
        color={currentSlider === 6 ? '#ccc' : '#333'}
        value="chevron-right"
        size={14}
      />
    </View>
  );
}
